<template>
  <div id="app">
    <!-- 代码1：基础布局，24等分 -->
    <h3>基础布局</h3>
    <el-row>
      <el-col :span="24"><div class="content red">:span="24"</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="12"><div class="content red">:span="12"</div></el-col>
      <el-col :span="12"><div class="content green">:span="12"</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="8"><div class="content red">:span="8"</div></el-col>
      <el-col :span="8"><div class="content green">:span="8"</div></el-col>
      <el-col :span="8"><div class="content yellow">:span="8"</div></el-col>
    </el-row>
    <h3>带间隔的分栏</h3>
    <!-- 代码2：带间隔的分栏 -->
    <el-row :gutter="10">
      <!-- 代码3：响应式分栏 xs,sm,md,lg,xl类似于Bootstrip中的 -->
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
        <div class="content red">:gutter="10"</div>
      </el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
        <div class="content green"></div>
      </el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
        <div class="content yellow"></div>
      </el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
        <div class="content blue"></div>
      </el-col>
    </el-row>
    <!-- 代码4：偏移的分栏 -->
    <h3>偏移的分栏</h3>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="content green">:offset="6"</div>
      </el-col>
    </el-row>
    <!-- 代码5：分栏的对齐方式-->
    <h3>分栏的对齐方式</h3>
    <el-row type="flex" justify="center">
      <el-col :span="6"><div class="content red">justify="center"</div></el-col>
      <el-col :span="6"><div class="content green"></div></el-col>
      <el-col :span="6"><div class="content yellow"></div></el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="6">
        <div class="content red">justify="space-around"</div>
      </el-col>
      <el-col :span="6"><div class="content green"></div></el-col>
      <el-col :span="6"><div class="content yellow"></div></el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "App",
};
</script>
<style>
.el-row {
  margin-bottom: 20px;
}
.content {
  height: 30px;
  border-radius: 10px;
  line-height: 30px;
  color: white;
  text-align: center;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.yellow {
  background-color: yellow;
}
.blue {
  background-color: blue;
}
</style>
